<template>
  <div>

<!--  查询  -->
    <el-form :inline="true" :model="pageForm" class="demo-form-inline">
      <el-form-item label="字典名称">
        <el-input v-model="pageForm.dictName" placeholder="字典名称"></el-input>
      </el-form-item>

      <el-form-item label="字典类型">
        <el-input v-model="pageForm.dictType" placeholder="字典类型"></el-input>
      </el-form-item>

      <el-form-item label="创建时间">
        <el-date-picker
            v-model="pageForm.createTime"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期">
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <!--  添加按钮  -->
        <el-button type="primary" @click="openadd">新增</el-button>
        <!--  报表      -->
        <el-button type="primary" @click="getBingChart">报表</el-button>
      </el-form-item>
    </el-form>

    <el-table
        :data="tableData"
        style="width: 100%"
        :row-class-name="tableRowClassName">
      <el-table-column
          prop="dictName"
          label="字典名称"
          width="180">
      </el-table-column>
      <el-table-column
          prop="dictType"
          label="字典类型"
          width="180">
      </el-table-column>
      <el-table-column
          prop="status"
          label="状态"
          width="180">
        <template v-slot="scope">
          <el-tag  type="success" v-if="scope.row.status == 0">正常</el-tag>
          <el-tag  type="info" v-if="scope.row.status == 1">停用</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="createBy"
          label="创建者"
          width="180">
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="创建时间"
          width="180">
      </el-table-column>
      <el-table-column
          prop="updateBy"
          label="更新者"
          width="180">
      </el-table-column>
      <el-table-column
          prop="updateTime"
          label="更新时间"
          width="180">
      </el-table-column>
      <el-table-column
          prop="remark"
          label="备注"
          width="180">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.row)">编辑</el-button>
          <el-button
              size="mini"
              type="primary"
              @click="dictdata(scope.row)">类型列表</el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

<!--  分页  -->
    <el-pagination
        @current-change="handleCurrentChange"
        :page-size="pageForm.pageSize"
        layout="total, prev, pager, next"
        :total="total">
    </el-pagination>

<!--  添加  -->
    <el-dialog title="新增字典" :visible.sync="dialogFormVisible">
      <el-form :model="addform" :rules="rules" ref="ruleForm">
        <el-form-item label="字典名称" :label-width="formLabelWidth" prop="dictName">
          <el-input v-model="addform.dictName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="字典类型" :label-width="formLabelWidth" prop="dictType">
          <el-input v-model="addform.dictType" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="状态" :label-width="formLabelWidth" prop="status">
          <el-radio v-model="addform.status" label="1">正常</el-radio>
          <el-radio v-model="addform.status" label="2">停用</el-radio>
        </el-form-item>

        <el-form-item label="创建者" :label-width="formLabelWidth" prop="createBy">
          <el-input v-model="addform.createBy" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="创建时间" :label-width="formLabelWidth" prop="createTime">
          <el-date-picker
              v-model="addform.createTime"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="更新者" :label-width="formLabelWidth" prop="updateBy">
          <el-input v-model="addform.updateBy" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="更新时间" :label-width="formLabelWidth" prop="updateTime">
          <el-date-picker
              v-model="addform.updateTime"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="备注" :label-width="formLabelWidth" prop="remark">
          <el-input v-model="addform.remark" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>

<!--  修改  -->
    <el-dialog title="修改" :visible.sync="updialogFormVisible">
      <el-form :model="updateform" :rules="rules" ref="ruleForm">
        <el-form-item label="字典名称" :label-width="formLabelWidth" prop="dictName">
          <el-input v-model="updateform.dictName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="字典类型" :label-width="formLabelWidth" prop="dictType" >
          <el-input v-model="updateform.dictType" autocomplete="off" disabled></el-input>
        </el-form-item>

        <el-form-item label="状态" :label-width="formLabelWidth" prop="status">
          <el-radio v-model="updateform.status" label="1">正常</el-radio>
          <el-radio v-model="updateform.status" label="2">停用</el-radio>
        </el-form-item>

        <el-form-item label="创建者" :label-width="formLabelWidth" prop="createBy">
          <el-input v-model="updateform.createBy" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="创建时间" :label-width="formLabelWidth" prop="createTime">
          <el-date-picker
              v-model="updateform.createTime"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="更新者" :label-width="formLabelWidth" prop="updateBy">
          <el-input v-model="updateform.updateBy" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="更新时间" :label-width="formLabelWidth" prop="updateTime">
          <el-date-picker
              v-model="updateform.updateTime"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="备注" :label-width="formLabelWidth" prop="remark">
          <el-input v-model="updateform.remark" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>


    <!--   div饼状图的区域-->
    <el-row>
      <el-col :span="20">
        <div style="height: 500px;width: 500px" id="main"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import * as echarts from 'echarts';
export default {
  data(){
    return{
      tableData:[],
      pageForm:{
        pageNum:1,
        pageSize:5,
      },
      total:0,

      //添加
      addform:{},
      dialogFormVisible:false,
      formLabelWidth:"120px",
      //修改
      updateform:{},
      updialogFormVisible:false,
      //校验
      rules: {
        dictName: [
          { required: true, message: '请输入字典名称', trigger: 'blur' },
        ],
        dictType: [
          { required: true, message: '请输入字典类型', trigger: 'blur' }
        ],
        createTime: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        updateTime: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        createBy: [
          { required: true, message: '请输入创建者', trigger: 'blur' }
        ],
        updateBy: [
          { required: true, message: '请输入更新者', trigger: 'blur' }
        ],
        remark: [
          { required: true, message: '请填写备注', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请输入状态', trigger: 'blur' }
        ]
      },
      ruleForm: {
        dictName: '',
        dictType: '',
        createTime: '',
        updateTime: '',
        createBy: '',
        updateBy: '',
        resource: '',
        remark: '',
        status:'',
      },


    }
  },
  methods:{
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    },
    //字典表查询
    onSubmit(){
      this.axios.post("http://localhost:8004/dictType/dictTypelist",this.pageForm).then(res=>{
        this.tableData = res.data.data.list;
        this.total = res.data.data.total;

      })
    },
    //分页
    handleCurrentChange(PageForm){
      this.pageForm.pageNum = PageForm;
      this.onSubmit();
    },
    //字典表添加
    openadd(){
      this.dialogFormVisible = true;
      this.list();
    },
    //添加
    add(){
      this.axios.post("http://localhost:8004/dictType/dictTypeAdd",this.addform).then(()=>{
        this.dialogFormVisible = false;
        this.$message.success("添加成功");
      })
    },
    //删除
    handleDelete(row){
      this.axios.delete("http://localhost:8004/dictType/delById?dictId=" + row.dictId).then(()=>{
        this.$message.success("删除成功");
      })
    },
    //修改
    handleEdit(row){
      this.updialogFormVisible = true
      this.updateform = row
    },
    update(){
      this.axios.post("http://localhost:8004/dictType/updateById",this.updateform).then(()=>{
        this.updialogFormVisible = false
        this.$message.success("修改成功");
      })
    },
    //字典类型列表
    dictdata(row){
        sessionStorage.setItem("type",row.dictType)
        this.$router.push("/dictData")
    },
    //类型报表
    getBingChart(){
      this.axios.get("http://localhost:8004/dictType/dictTypeBingChart").then(res=>{
        let a = res.data.data
        let chartDom = document.getElementById("main");
        let myChart = echarts.init(chartDom);

        var option = {
          title: {
            text: 'Nightingale Chart',
            subtext: 'Fake Data',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            left: 'center',
            top: 'bottom',
            data: a
          },
          toolbox: {
            show: true,
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          series: [
            {
              name: 'Radius Mode',
              type: 'pie',
              radius: [20, 140],
              center: ['25%', '50%'],
              roseType: 'radius',
              itemStyle: {
                borderRadius: 5
              },
              label: {
                show: false
              },
              emphasis: {
                label: {
                  show: true
                }
              },
              data: a
            },
            {
              name: 'Area Mode',
              type: 'pie',
              radius: [20, 140],
              center: ['75%', '50%'],
              roseType: 'area',
              itemStyle: {
                borderRadius: 5
              },
              data: a
            }
          ]
        };
        option && myChart.setOption(option)
      })

    }
  },
  created() {
    //字典表查询
    this.onSubmit();
  }
}
</script>


<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
